<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>web成果展示</title>
		<link rel="stylesheet" type="text/css" href="./css/自定义栅格.css" />
		<link rel="stylesheet" type="text/css" href="./css/public.css" />
		<link rel="stylesheet" type="text/css" href="./css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
		<link rel="shortcut icon" href="./img/木.png">
	</head>

	<style type="text/css">
		.contact{font-size: 30px;color: #000; margin: 50px;height: 70%;}
		.contact .info{width: 100%;background: cornflowerblue;}
		.contact .info .info-item i{display: inline-block;width: 20px;height: 20px;font-size: 30px;}
		.contact .info .info-item span{display: inline-block;line-height: 60px;}
		.contact .info .info-item span:nth-of-type(1){padding: 5px;}
		.contact .info .info-item span:nth-of-type(2){}
	</style>
	<body>
		<div id="myHome">
			<!--头部开始-->
			<div id="header" class="clearfix">
				<div class="header_fix">
					<div class="container">
						<div class="row clearfix" >
							<a href="index.html"  class="col-xs-6 logo"><i></i></a>
						<ul>
							<a href="index.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-mu"></i>
									<span>首页</span>
								</li>
							</a>
							<a href="aboutMe.html" class="col-xs-6 ">
								<li class="aboutMe">
									<i class="iconfont icon-wo"></i>
									<span>关于我</span>
								</li>
							</a>
							<a href="music.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-yinle"></i> 音乐
								</li>
							</a>
							<a href="photos.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-zhaopian"></i>
									<span>相册</span>
								</li>
							</a>
							<a href="diary.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-diary"></i>
									<span>日记</span>
								</li>
							</a>
							<a href="travel.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-lvhang1"></i> 旅行
								</li>
							</a>

							<a href="contactME.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-dianhua"></i>
									<span>联系我</span>
								</li>
							</a>
							<a href="webProduct.html" class="col-xs-6 ">
								<li>
									<i class="iconfont icon-xiangmu"></i>
									<span>web作品展示</span>
								</li>
							</a>
						</ul>
						</div>
					</div>
				</div>

			</div>
			<!--头部结束-->
			
			<!--内容部分-->
			<div class="contact">
				<div class="container">
					<!--日记-消逝在时光里的记忆-->
					<div class="diary clearfix">
						<div class="title ">
							<i class="iconfont icon-xiangmu"></i>
							<span>那些消逝在时光里的记忆</span>
						</div>
						<div class='row clearfix'>
							<div class="col-lg-3 col-md-3 col-xs-12 col-sm-6">
								<div class="desc-item clearfix">
									<h3><img src="./img/beijing.jpg"/><span>北漂的生活</span></h3>
									<p>从北京回来已经有些时日，可最近总是梦见又回北京。在北京生活了6年，整个青春岁月都是在那边度过的，自从2011年的秋天去了北京上大学，直至17年年底才回到老家,大学毕业后，对于自己待了4年的城市，竟有些留恋，也必将看好北京的互联网环境，我成为了千千万万北漂的一员.....</p>
									<date class='date'>2017-12-15</date>
									<a href="#" class="readMore">阅读更多...</a>
								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-xs-12 col-sm-6">
								<div class="desc-item clearfix">
									<h3><img src="./img/hua.png"  />学习web前端的初衷</h3>
									<p>也许很多人不理解，我为什么辞掉了工资马上上万的工作，而选择从头开始学习web前端网页开发技术，况且年龄也不小了，现在转行，真的太需要勇气，我想我也是鼓起了我最大的勇气，告别了北漂，回到了长沙这样的二线城市学习前端。的确，北京的互联网环境要比长沙好太多.....</p>
									<date class='date'>2017-12-15</date>
									<a href="#" class="readMore">阅读更多...</a>
								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-xs-12 col-sm-6">
								<div class="desc-item clearfix">
									<h3><img src="./img/love1.jpg"  /><span>遇见你是我此生最幸运的事</span></h3>
									<p>09年认识你的时候，我们正值18岁的少年，懵懂的我们面临高考，曾经我们约定要一起去考北京的学校，可是事与愿违，我们还是分开了，然后擦肩而过，一晃眼就是七八年过去了，我也倦怠了北漂，幸运的是，你仍在这里，很多东西都还没有变，那么余生，请多指教.....</p>

									<date class='date'>2017-12-15</date>
									<a href="#" class="readMore">阅读更多...</a>
								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-xs-12 col-sm-6">
								<div class="desc-item clearfix">
									<h3><img src="./img/web.jpg"  />web学习技巧总结</h3>
									<p>1、元素垂直居中的方法.....</p>
									<p>2、元素垂直居中的方法.....</p>
									<p>3、元素垂直居中的方法.....</p>
									<p>4、元素垂直居中的方法.....</p>
									<p>5、元素垂直居中的方法.....</p>
									<date class='date'>2017-12-15</date>
									<a href="#" class="readMore">阅读更多...</a>
								</div>
							</div>
						</div>
					</div>
					<!--日记-消逝在时光里的记忆结束-->
					
				</div>
				
			</div>

		<!--底部部分-->
			<div id="footer">
				<div class='container'>
					<div class='footer_link'>web前端学习常用链接：
						<a href="https://github.com/">github代码托管</a>
						<a href="https://ke.qq.com/">腾讯课堂</a>
						<a href="https://gitee.com/">码云</a>
						<a href="http://www.w3school.com.cn/">W3C school</a>
						<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript">javascript MDN</a>
						<a href="http://www.runoob.com/">菜鸟教程</a>
						<a href="https://ke.qq.com/">自强学堂</a>
					</div>
					<p>本网站作者：张琴琳，所有的内容由本人原创，侵权必究。</p>
				</div>
			</div><br />
			<!--底部部分结束-->
		<div class="toTOP">
			<div class="f_top">

			</div>
		</div>

		</div>
	</body>

</html>